<ul nz-menu nzMode="horizontal" align="center">
    <span>
        movielens
    </span>
    <li nz-submenu nzTitle="快速链接">
        <ul>
            <li nz-menu-group nzTitle="Item 1">
                <ul>
                    <li nz-menu-item>Option 1</li>
                    <li nz-menu-item>Option 2</li>
                </ul>
                </li>
                <li nz-menu-group nzTitle="Item 2">
                <ul>
                    <li nz-menu-item>Option 3</li>
                    <li nz-menu-item>Option 4</li>
                    <li nz-submenu nzTitle="Sub Menu">
                        <ul>
                            <li nz-menu-item nzDisabled>Option 5</li>
                            <li nz-menu-item>Option 6</li>
                        </ul>
                    </li>
                    <li nz-submenu nzDisabled nzTitle="Disabled Sub Menu">
                        <ul>
                            <li nz-menu-item>Option 5</li>
                            <li nz-menu-item>Option 6</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li nz-submenu nzTitle="用户空间">
    <ul>
        <li nz-menu-group nzTitle="Item 1">
            <ul>
                <li nz-menu-item>Option 1</li>
                <li nz-menu-item>Option 2</li>
            </ul>
            </li>
            <li nz-menu-group nzTitle="Item 2">
            <ul>
                <li nz-menu-item>Option 3</li>
                <li nz-menu-item>Option 4</li>
                <li nz-submenu nzTitle="Sub Menu">
                    <ul>
                        <li nz-menu-item nzDisabled>Option 5</li>
                        <li nz-menu-item>Option 6</li>
                    </ul>
                </li>
                <li nz-submenu nzDisabled nzTitle="Disabled Sub Menu">
                    <ul>
                        <li nz-menu-item>Option 5</li>
                        <li nz-menu-item>Option 6</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    </li>
    <li nz-submenu nzTitle="影片类别">
      <ul>
        <li nz-menu-group nzTitle="Item 1">
          <ul>
            <li nz-menu-item>Option 1</li>
            <li nz-menu-item>Option 2</li>
          </ul>
        </li>
        <li nz-menu-group nzTitle="Item 2">
          <ul>
            <li nz-menu-item>Option 3</li>
            <li nz-menu-item>Option 4</li>
            <li nz-submenu nzTitle="Sub Menu">
              <ul>
                <li nz-menu-item nzDisabled>Option 5</li>
                <li nz-menu-item>Option 6</li>
              </ul>
            </li>
            <li nz-submenu nzDisabled nzTitle="Disabled Sub Menu">
              <ul>
                <li nz-menu-item>Option 5</li>
                <li nz-menu-item>Option 6</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li nz-menu-item nzDisabled>
        <nz-input-group [nzSuffix]="suffixIconSearch">
            <input type="text" nz-input placeholder="input search text" />
        </nz-input-group>
        <ng-template #suffixIconSearch>
            <i nz-icon nzType="search"></i>
        </ng-template>
    </li>
</ul>

<div style="background: #ECECEC;padding: 30px 200px;">
    <nz-card [nzBordered]="true">
        <div nz-card-grid [ngStyle]="gridStyle">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593360845085&di=b5e1953ed8f1030f63207e47dc6c5522&imgtype=0&src=http%3A%2F%2Fwww.gscn.com.cn%2Fpic%2F0%2F10%2F35%2F77%2F10357769_657750.jpg" />
        </div>
        <div nz-card-grid style="margin-left: 12%; width: 60%; margin-top: 2%;">
            <article nz-typography>
                <h1 nz-typography>肖申克的救赎</h1>
                <p nz-typography>
                    <nz-rate [ngModel]="4"></nz-rate>
                </p>
                <p nz-typography>
                    <strong>平均评分</strong>
                    <span nz-typography></span>.
                </p>
                <p nz-typography>
                    <strong>影片类别</strong>
                    <span nz-typography></span>.
                </p>
            </article>
        </div>
    </nz-card>
</div>

<nz-layout>
    <nz-sider>
        <span>
            In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
After massive project practice and summaries, Ant Design, a design language for backgroundapplications, is refined by Ant UED Team, which aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources ofdesign and front-end development .
        </span>
    </nz-sider>
    <nz-content>
        <span>
            In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
After massive project practice and summaries, Ant Design, a design language for backgroundapplications, is refined by Ant UED Team, which aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources ofdesign and front-end development .
        </span>
    </nz-content>
</nz-layout>